<!doctype html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>

		<!-- Bootstrap -->
		<link rel="stylesheet" href="bootstrap.min.css">
		<style>
			.itemRow {
				background-color: blanchedalmond;
				height: 200px;
			}
			.tabs{
				padding: 20px;
				width: 100%;
				height: 300px;
				background-color: #F2F2F2;
			}
		</style>
		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	</head>
	<body>
		<div class="container">
			
			<!-- 表单 -->
			<div class="row">
				<div class="col-md-6 col-md-offset-3 ">
					<form class="form">
					  <div class="form-group">
					    <label for="exampleInputEmail1">Email address</label>
					    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
					  </div>
					  <div class="form-group">
					    <label for="exampleInputPassword1">Password</label>
					    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
					  </div>
					  <div class="form-group">
					    <label for="exampleInputFile">File input</label>
					    <input type="file" id="exampleInputFile">
					    <p class="help-block">Example block-level help text here.</p>
					  </div>
					  <div class="checkbox">
					    <label>
					      <input type="checkbox"> Check me out
					    </label>
					  </div>
					  <button type="submit" class="btn btn-default">Submit</button>
					</form>
					
				</div>
			</div>
			
			<!-- 登录框 -->
			<div class="row" style="margin-top: 100px;">
				<div class="col-md-offset-3 col-md-6"></div>
				<form class="form">
				  <div class="form-group col-md-5" >
				    <label class="sr-only" for="exampleInputEmail3">Email address</label>
				    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="邮箱号">
				  </div>
				  <div class="form-group col-md-5">
				    <label class="sr-only" for="exampleInputPassword3">Password</label>
				    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="密码">
				  </div>
				  <div class="checkbox">
				    <label>
				      <input type="checkbox"> Remember me
				    </label>
				  </div>
				  <button id="login" class="btn btn-default">Sign in</button>
				</form>
				
			</div>
			
			
			<div class="row">
				<div class="col-md-6 col-md-offset-3 ">
					<button class="btn btn-danger btn-xs"> 按钮 </button>
					<button class="btn btn-link "> 超级链接 </button>
					<img src="./1.webp" class="img-thumbnail" width="140px" alt="Responsive image">
					<button type="button" class="btn btn-primary">（首选项）Primary</button>
					<button class="btn btn-primary btn-lg disabled " id="btn1">  232</button>	
					
					
					<img src="./1.webp" alt="..." width="100px" class="img-rounded">
					<img src="./1.webp" alt="..." width="100px" class="img-circle">
					<img src="./1.webp" alt="..." width="100px" class="img-thumbnail">
					
				</div>
			</div>
			
			
			<div class="row" style="margin-top: 100px;">
				
				<div class="col-md-6 col-md-offset-3"> 
					<div class="btn-group  btn-group-xs" role="group" aria-label="...">
					  <button type="button" class="btn btn-default">Left</button>
					  <button type="button" class="btn btn-default">Middle</button>
					  <button type="button" class="btn btn-success">Right</button>
					  <button type="button" class="btn btn-default">Right</button>
					</div>
					
					
					<div class="input-group input-group-sm">
					  <span class="input-group-addon" id="sizing-addon1">@</span>
					  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
					</div>
				</div>
			</div>
			
			
			<div class="container">
				 <!-- Nav tabs -->
				  <ul class="nav nav-tabs" role="tablist">
				    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
				    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
				    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
				    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
				  </ul>
				
				  <!-- Tab panes -->
				  <div class="tab-content">
				    <div role="tabpanel" class="tab-pane active tabs" id="home">
						<ol class="breadcrumb">
						  <li><a href="#">Home</a></li>
						  <li><a href="#">Library</a></li>
						  <li class="active">Data</li>
						</ol>
						
					</div>
				    <div role="tabpanel" class="tab-pane tabs" id="profile" style="position: relative;">
						
						<nav aria-label="Page navigation" style="position: absolute; bottom: 0; right: 20px;">
						  <ul class="pagination">
						    <li>
						      <a href="#" aria-label="Previous">
						        <span aria-hidden="true">&laquo;</span>
						      </a>
						    </li>
						    <li><a href="#">1</a></li>
						    <li><a href="#">2</a></li>
						    <li><a href="#">3</a></li>
						    <li><a href="#">4</a></li>
						    <li><a href="#">5</a></li>
						    <li>
						      <a href="#" aria-label="Next">
						        <span aria-hidden="true">&raquo;</span>
						      </a>
						    </li>
						  </ul>
						</nav>
						
					</div>
				    <div role="tabpanel" class="tab-pane tabs" id="messages" >
						<h3>Example heading <span class="label label-default">New</span></h3>
						<nav aria-label="...">
						  <ul class="pager">
						    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
						    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
						  </ul>
						</nav>
					</div>
				    <div role="tabpanel" class="tab-pane tabs" id="settings">
						
						<div class="jumbotron">
						  <h1>Hello, world!</h1>
						  <p>...</p>
						  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
						</div>
						<!-- <button class="btn btn-danger "> 更新 <span class="badge">42</span> </button> -->
						
					</div>
				  </div>
				
			</div>
			
			
			<div class="row">
			  <div class="col-xs-6 col-md-3">
			    <a href="#" class="thumbnail">
			      <img src="./1.webp" alt="...">
			    </a>
			  </div>
			  <div class="col-xs-6 col-md-1">
			    <a href="#" class="thumbnail">
			      <img src="./1.webp" alt="...">
			    </a>
			  </div>
			  <div class="col-xs-6 col-md-2">
			    <a href="#" class="thumbnail">
			      <img src="./1.webp" alt="...">
			    </a>
			  </div>
			  <div class="col-xs-6 col-md-3">
			    <a href="#" class="thumbnail">
			      <img src="./1.webp" alt="...">
			    </a>
			  </div>
			</div>
			
			
			<div class="row" >
				<div class="progress">
				  <div class="progress-bar progress-bar-danger progress-bar-striped active " role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
				     30%
				  </div>
				</div>
			</div>
			
			
		</div>


		
		

			<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
			<script src="jquery.js"></script>
			<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
			<script src="bootstrap.min.js"></script>、
			<script>	
			
				$('#btn1').click(function(){
					console.log(111)
				})
				$('#login').click(function(){
					var email = $('#exampleInputEmail3').val()
					var pasd = $('#exampleInputPassword3').val()
					
					console.log(email,pasd)
					
				})
				
			</script>
	</body>
</html>